<template>
  <div style="padding: 30px">
    <el-form ref="form" :model="form" label-width="100px">
      <el-row>
        <el-form-item label="病人姓名" >
          <el-select v-model="form.medicalPatientName" placeholder="请选择病人" filterable>
            <el-option v-for="patient in patientDatalist" :label="patient.patientName"
                       :value="patient.patientName"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="血型">
          <el-input v-model="form.medicalPatientBloodtype"/>
        </el-form-item>
      </el-row>
      <el-row>
          <el-form-item label="负责医生" >
            <el-select v-model="form.medicalDoctorName" placeholder="请选择医生" filterable>
              <el-option v-for="doctor in doctorDatalist" :label="doctor.doctorName"
                         :value="doctor.doctorName"></el-option>
            </el-select>
          </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="药品名称">
          <el-select  multiple v-model=medicalDrugName1 placeholder="请选择药品" filterable>
            <el-option v-for="drug in drugDatalist" :label="drug.drugName"
                       :value="drug.drugName"></el-option>
          </el-select>
        </el-form-item>
      </el-row>
      <el-form-item label="性别">
        <el-select v-model="form.medicalPatientSex" placeholder="请选择性别 ">
          <el-option label="男" value="男" />
          <el-option label="女" value="女" />
        </el-select>
      </el-form-item>
      <el-row>
        <el-form-item label="日期">
        <el-date-picker v-model="form.medicalDate" type="date" placeholder="选择日期" style="width: 350px"/>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="症状图">
          <el-input v-model="form.medicalPatientPic" placeholder="Please input" />
          <img :src="form.medicalPatientPic" alt="图片加载失败" style="width: 150px; height: 150px">
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="诊断建议">
          <el-input v-model="form.medicalPatientDiag" placeholder="Please input" style="width: 800px; height: 150px"  />
        </el-form-item>
      </el-row>
      <el-form-item style="marginLeft: 750px">
        <el-button type="primary" @click="onSubmit">创建</el-button>
        <el-button @click="form={}">取消</el-button>
      </el-form-item>

    </el-form>
  </div>
</template>

<script>

import axios from "axios";

export default {
  name: "MedicalAdd",
  data() {
    return {
      form: {},
      drugDatalist: [],
      medicalDatalist: [],
      doctorDatalist: [],
      patientDatalist: [],
      medicalDrugName1: [],
    }
  },
  created(){
    this.getAllDrug();
    this.getAllPatient();
    this.getAllMedical();
    this.getAllDoctor();
  },
  methods: {
    onSubmit() {
      this.form.medicalDrugName=this.medicalDrugName1.join(",");
      axios.post("/api/medical", this.form).then((res) => {
        alert(res.data.msg);
        this.form = {};
        this.getAllMedical();
      });
    },
    getAllDrug() {
      axios.get("/api/drug").then((res) => {
        this.drugDatalist = res.data.data;
        this.message = res.data.msg;
      });
    },
    getAllDoctor() {
      axios.get("/api/doctor").then((res) => {
        this.doctorDatalist = res.data.data;
        this.message = res.data.msg;
      });
    },
    getAllPatient() {
      axios.get("/api/patient").then((res) => {
        this.patientDatalist = res.data.data;
        this.message = res.data.msg;
      });
    },
    getAllMedical() {
      axios.get("/api/medical").then((res) => {
        this.medicalDatalist = res.data.data;
        this.message = res.data.msg;
      });
    },
  }
}

</script>

<style scoped>

</style>